<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<!--<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">-->
	<meta name="format-detection" content="telephone=no" />
	<title>沟通中</title>
	<link rel="stylesheet" type="text/css" href="__STATIC__/newcj/css/themes.css?v=2017129">
	<link rel="stylesheet" type="text/css" href="__STATIC__/newcj/css/h5app.css">
	<link rel="stylesheet" type="text/css" href="__STATIC__/newcj/fonts/iconfont.css?v=2016070717">
	<link rel="stylesheet" type="text/css" href="__STATIC__/newcj/css/chat_list.css">
	<script src="__STATIC__/qqFace/js/jquery.min.js"></script>
	<script src="__STATIC__/newcj/js/dist/flexible/flexible_css.debug.js"></script>
	<script src="__STATIC__/newcj/js/dist/flexible/flexible.debug.js"></script>
	<script src="__STATIC__/qqFace/js/jquery.qqFace.js"></script>
	<style>
		.chat_img{
			width: 1rem;
			height: 0.5rem;
		}
	</style>
</head>
<body>
<div class='fui-page-group'>
	<div class="fui-statusbar"></div>
	<div class='fui-page chat-page'>
		<div class="fui-header">
			<div class="title">消息列表</div>
			<div class="fui-header-right"></div>
		</div>

		<div class="fui-content navbar chat-fui-content" style="padding-bottom: 2rem;">
			<!--		<div class="chat-list flex" >-->

			<!--			<div class="chat-img"  style="background-image: url('/img/555.jpg')">-->
			<!--				<span class="badge" style="top: -0.1rem;left: 80%;">1</span>-->
			<!--			</div>-->
			<!--			<div class="chat-info">-->
			<!--				<p class="chat-merch flex">-->
			<!--					<span class="title t-28">魔力克</span>-->
			<!--					<span class="time">2017-12-14</span>-->
			<!--				</p>-->
			<!--				<p class="chat-text singleflow-ellipsis">你好</p>-->
			<!--			</div>-->



			<!--		</div>-->

		</div>
	</div>
</div>
</body>
<script>

	var API_URL = "__DOMAIN__/api/chat/";
	var fromid ={$fromid};

	var ws = new WebSocket("__WEBSOCKET__");
	ws.onopen = function(){
		//当WebSocket创建成功时，触发onopen事件
		console.log("open");
		setIntervalId = setInterval(heart, 5000)
		//ws.send("hello1"); //将消息发送到服务端
	}
	ws.onmessage=function(e){
		var message = eval("("+ e.data+")");
		console.log(message);
		switch (message.type){
			case  "init":
				var bind = '{"type":"bind","fromid":"'+fromid+'"}';
				ws.send(bind);
				list();
				return;
			case "chat":
				list();
				return;
			case "say_img":
				list();
				return;

		}
	}

	function list(){
		$.post(
				API_URL+"get_list",
				{id:fromid},
				function(res){
					console.log(res);
					$(".chat-fui-content").html("");
					if(res.length !== 0){
						// 数组不为空
						$.each(res,function(index,content) {
							if(content.countNoread != 0) {
								if(content.last_message.type == 1) {
									$('.chat-fui-content').append(
											'<div onclick=redi("' + content.chat_page + '") class="chat-list flex" >' +
											'<div class="chat-img"  style="background-image: url(/' + content.head_url + ')">' +
											'<span class="badge" style="top: -0.1rem;left: 80%;">' + content.countNoread + '</span></div> ' +
											'<div class="chat-info">' +
											'<p class="chat-merch flex">' +
											'<span class="title t-28">' + content.username + '</span>' +
											'<span class="time">' + mydate(content.last_message.time) + '</span>' +
											'</p>' +
											'<p class="chat-text singleflow-ellipsis">' + replace_em(content.last_message.content) + '</p>' +
											'</div>' +
											'</div>');
								} else {
									// 图片
									$('.chat-fui-content').append(
											'<div onclick=redi("' + content.chat_page + '") class="chat-list flex" >' +
											'<div class="chat-img"  style="background-image: url(/' + content.head_url + ')">' +
											'<span class="badge" style="top: -0.1rem;left: 80%;">' + content.countNoread + '</span></div> ' +
											'<div class="chat-info">' +
											'<p class="chat-merch flex">' +
											'<span class="title t-28">' + content.username + '</span>' +
											'<span class="time">' + mydate(content.last_message.time) + '</span>' +
											'</p>' +
											'<p class="chat-text singleflow-ellipsis"><img class="chat_img" src="/uploads/' + content.last_message.content + '"</></p>' +
											'</div>' +
											'</div>');
								}
							} else {
								if(content.last_message.type == 1) {
									$('.chat-fui-content').append(
											'<div onclick=redi("' + content.chat_page + '") class="chat-list flex" >' +
											'<div class="chat-img"  style="background-image: url(/' + content.head_url + ')"></div>' +
											'<div class="chat-info">' +
											'<p class="chat-merch flex">' +
											'<span class="title t-28">' + content.username + '</span>' +
											'<span class="time">' + mydate(content.last_message.time) + '</span>' +
											'</p>' +
											'<p class="chat-text singleflow-ellipsis">' + replace_em(content.last_message.content) + '</p>' +
											'</div>' +
											'</div>');
								} else {
									// 图片
									$('.chat-fui-content').append(
											'<div onclick=redi("' + content.chat_page + '") class="chat-list flex" >' +
											'<div class="chat-img"  style="background-image: url(/' + content.head_url + ')"></div>' +
											'<div class="chat-info">' +
											'<p class="chat-merch flex">' +
											'<span class="title t-28">' + content.username + '</span>' +
											'<span class="time">' + mydate(content.last_message.time) + '</span>' +
											'</p>' +
											'<p class="chat-text singleflow-ellipsis"><img class="chat_img" src="/uploads/' + content.last_message.content + '"</></p>' +
											'</div>' +
											'</div>');
								}
							}
						});
					}
				},'json'
		)
	}

	// 发送心跳检测
	function heart(){
		ws.send('{"type":"heart"}');
	}
	/**
	 *根据时间戳格式化为日期形式
	 */
	function mydate(nS){

		return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
	}


	//查看结果

	function replace_em(str){

		str = str.replace(/\</g,'&lt;');

		str = str.replace(/\>/g,'&gt;');

		str = str.replace(/\n/g,'<br/>');

		str = str.replace(/\[em_([0-9]*)\]/g,'<img src="__STATIC__/qqFace/arclist/$1.gif" border="0" />');
		return str;

	}

	function redi(url){
		window.location.href=url;
	}

</script>

</html>
